IME と compositionstart とcompositionupdate と compositionend と

compositionstart イベントは、IME などのテキスト変換システムが新しい変換セッションを開始したときに発生します。

compositionupdate イベントは、IME などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。

compositionend イベントは、IME などのテキスト編集システムが現在の編集セッションを完了またはキャンセルした時に発生します。

https://scrapbox.io/files/6930fa33d3715fb7cdd4d5fa.gif

compositionstart data: ""

compositionupdate data: "ｈ"

input value: "ｈ"

compositionupdate data: "ほ"

input value: "ほ"

compositionupdate data: "ほｇ"

input value: "ほｇ"

compositionupdate data: "ほげ"

input value: "ほげ"

compositionupdate data: "ほげ"

input value: "ほげ"

compositionend data: "ほげ"

input に対して日本語入力で "h" と入力(キーボードで "h" を押下)すると、

compositionstart data: ""

compositionupdate data: "ｈ"

input value: "ｈ"

って感じになる

一瞬 compositionstart data: "" に対して「ん？」ってなったけど、よく考えると start したタイミングなので event.data が空文字なのはそれはそうって理解できた

event.data は compostion が確定するまでの値のこと

compostionend が起きるとリセット？される